<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			@import url("https://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:900");
			html {
				display: grid;
				min-height: 100%;
			}
			
			body {
				display: grid;
				background: #0D1A28;
			}
			.container {
				position: relative;
				//margin: auto;
				margin-top: 14em;
				overflow: hidden;
				width: 100%;
				height: 50%;
			}
			
			h1 {
				/*font-family: "Lato", sans-serif;
				text-align: center;
				margin-top: 2em;
				font-size: 1em;
				text-transform: uppercase;
				letter-spacing: 5px;
				color: #F6F4F3;*/
				
				font-family: "Lato", sans-serif;
				z-index: 1;
				position: absolute;
				margin-top: 2em;
				text-transform: uppercase;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-100%);
				font-size: 1em;
				padding: 7.5px 15px;
				overflow: hidden;
			}
			
			span {
				text-shadow: 3px 3px 3px #555;
				font-size: 1em;
				color: rgba(5, 5, 5, 0);
				transition: font-size 1s, color 1s;
			}
			
			#timer {
				color: #F6F4F3;
				text-align: center;
				text-transform: uppercase;
				font-family: "Lato", sans-serif;
				font-size: .7em;
				letter-spacing: 5px;
			}
			
			.days,
			.hours,
			.minutes,
			.seconds {
				display: inline-block;
				padding: 20px;
				width: 150px;
				border-radius: 5px;
			}
			
			.days {
				background: #EF2F3C;
			}
			
			.hours {
				background: #00ADBC;
			}
			
			.minutes {
				background: #276FBF;
			}
			
			.seconds {
				background: #F0A202;
			}
			
			.numbers {
				font-family: "Montserrat", sans-serif;
				color: #183059;
				font-size: 5em;
			}
			
			footer {
				position: absolute;
				bottom: 0;
				right: 0;
				text-transform: uppercase;
				padding: 10px;
				font-family: "Lato", sans-serif;
				font-size: 0.7em;
			}
			
			footer p {
				letter-spacing: 3px;
				color: #EF2F3C;
			}
			
			footer a {
				color: #F6F4F3;
				text-decoration: none;
			}
			
			footer a:hover {
				color: #276FBF;
			}
		</style>
		<script>
			var url = 'https://www.pgyer.com/comming';
			var surpriseTime = new Date("Sept 27, 2018 15:26:07").getTime();
			var timerInterval;
			var todayTime = new Date().getTime();
			// math
			var	days = calDays(todayTime);
			var	hours = calHours(todayTime);
			var	minutes = calMinutes(todayTime);
			var	seconds = calSeconds(todayTime);
			function timerCounter() {
				// get today's date
				todayTime = new Date().getTime();
				// math
				days = calDays(todayTime);
				hours = calHours(todayTime);
				minutes = calMinutes(todayTime);
				seconds = calSeconds(todayTime);
				if(days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
					window.location.href = url;
					clearInterval(timerInterval);
				} else {
					// display
					innerHtml("days_numbers", days);
					innerHtml("hours_numbers", hours);
					innerHtml("minutes_numbers", minutes);
					innerHtml("seconds_numbers", seconds);
				}
			}
			
			function innerHtml(id, val) {
				document.getElementById(id).innerHTML = val;
			}
			function calDays(todayTime) {
				var todayTime = new Date().getTime();
				var	diff = surpriseTime - todayTime;
				var calDays = Math.floor(diff / (1000 * 60 * 60 * 24));
				return calDays;
			}
			function calHours(todayTime) {
				var todayTime = new Date().getTime();
				var	diff = surpriseTime - todayTime;
				var calHours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				return calHours;
			}
			function calMinutes(todayTime) {
				var todayTime = new Date().getTime();
				var	diff = surpriseTime - todayTime;
				var calMinutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
				return calMinutes;
			}
			function calSeconds(todayTime) {
				var todayTime = new Date().getTime();
				var	diff = surpriseTime - todayTime;
				var calSeconds = Math.floor((diff % (1000 * 60)) / 1000);
				return calSeconds;
			}
			
			// countdown
			if(days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
				window.location.href = url;
			} else{
				timerInterval = setInterval(timerCounter, 1000);
			}
		</script>
	</head>

	<body>
		<div class="container">
			<div id="timer">
				<div class="days">
					<div id="days_numbers" class="numbers">0</div>days
				</div>
				<div class="hours">
					<div id="hours_numbers" class="numbers">0</div>hours
				</div>
				<div class="minutes">
					<div id="minutes_numbers"class="numbers">5</div>minutes
				</div>
				<div class="seconds">
					<div id="seconds_numbers" class="numbers">24</div>seconds
				</div>
			</div>
			
		</div>
		<h1>Comming</h1>
		<script>
	var minChar = 10;
	var maxChar = 18;

	var heading = document.getElementsByTagName('h1')[0];
	var arr = heading.innerHTML.split('');
	heading.innerHTML = null;

	var c = [];

	for(var i = 0; i < arr.length; i++) {
		var elm = document.createElement('span');
		elm.innerHTML = arr[i];
		heading.appendChild(c[i] = elm);

		c[i].addEventListener("transitionend", function(e) {
			var el = e.srcElement;
			if(e.propertyName === 'font-size') {
				var oldsize = parseInt(el.style.fontSize);
				el.style.fontSize = random(minChar, maxChar) + 'vw';
				if(oldsize === parseInt(el.style.fontSize)) {
					el.style.fontSize = oldsize + 1 + 'vw';
				}
				el.style.color = rgbR();
				var s = random(200, 800) / 1000;
				el.style.transition = 'font-size ' + s + 's, color 1s';
			}
		});
	}

	setTimeout(function() { //debouce and fire all letters.
		for(var i = 0; i < c.length; i++) {
			c[i].style.color = rgbR();
			c[i].style.fontSize = random(minChar, maxChar) + 'vw';
		}
	}, 100);

	function random(max, min) {
		return Math.floor(Math.random() * (max - min + 1) + min);
	}

	function rgbR() {
		return 'rgb(' + random(0, 255) + ', ' + random(0, 255) + ', ' + random(0, 255) + ')';
	}
</script>
	</body>

</html>